<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <link rel="stylesheet" href="http://10.55.10.44:25040/css/common.css">
  <style>
    .app {
      display: flex;
      flex-direction: column;
      padding: 15px;
      width: 910px;
      margin: 0 auto;
    }

    header {
      width: 100%;
      height: 300px;
      margin-bottom: 15px;
    }

    header img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    main > p {
      margin-bottom: 15px;
    }

    table {
      border: 1px solid #e0e0e0;
      border-collapse: collapse;
    }

    thead {
      height: 50px;
    }

    td {
      text-align: center;
      height: 80px;
    }

    tbody {
      box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.1);
    }

    tbody tr:nth-child(even) {
      background: #F7F6FB;
    }

    td img {
      margin: 0 auto;
      width: 50px;
      height: 50px;
      object-fit: contain;
    }

    tbody a {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      justify-content: center;
    }

    tbody td button {
      width: 20px;
      height: 20px;
    }

    tbody td span {
      margin: 0 5px;
    }

    tbody td button.del {
      width: auto;
      background: red;
      color: white;
      border: 1px solid #ccc;
      outline: none;
      padding: 0 5px;
      border-radius: 4px;
      cursor: pointer;
    }

    tfoot div {
      display: flex;
      justify-content: space-between;
      padding: 0 25px;
    }

    tfoot span {
      font-size: 18px;
      color: red;
    }

    tfoot button {
      background: blue;
      color: #fff;
      padding: 5px 8px;
      border: none;
      outline: none;
    }

  </style>
</head>
<body>
  <div class="app">
    <header>
      <img :src="baseUrl + '/img/fruit.jpg'">
    </header>
    <main>
      <p><span>主页</span> / <span>购物车</span></p>
      <table alige="center" width="100%">
        <thead>
          <tr>
            <th>选中</th>
            <th>图片</th>
            <th>单价</th>
            <th>个数</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="fruitList.length">
          <tr v-for="(item, index) in fruitList">
            <td>
              <input type="checkbox" v-model="fruitList[index].isChecked" @change="item.isChecked && !item.num ? item.num = 1 : ''">
            </td>
            <td>
              <img :src="item.icon" alt="">
            </td>
            <td>
              {{ item.price }}
            </td>
            <td>
              <a href="javascript: void(0);">
                <button @click="onClickDel(index)">-</button>
                <span>{{ item.num }}</span>
                <button @click="onClickAdd(index)">+</button>
              </a>
            </td>
            <td>{{ item.num * item.price }}</td>
            <td>
              <button class="del" @click="fruitList.splice(index, 1)">删除</button>
            </td>
          </tr>
        </tbody>
        <tbody v-else style="height: 100px;margin: auto;background: #f5f5f5;color: #666;">
          <tr><td colspan="6">您的购物车空空如也, 快去添加吧~</td></tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="6">
              <div>
                <p><input type="checkbox" v-model="isAllChecked">全选</p>
                <p>总价: ￥ <span>{{ allPrice }}</span> <button>结算 ({{ checkedCount   }})</button></p>
              </div>
            </td>
          </tr>
        </tfoot>
      </table>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const baseUrl = 'http://10.55.10.44:25040'
    // 配置vue实例, 挂载app元素
    const app = new Vue({
      el: '.app',
      data: {
        // 后端服务器的端口域名协议部分
        baseUrl: baseUrl,
        // 购物车水果列表
        fruitList: [
            {
              id: 1,
              icon: baseUrl + '/img/火龙果.png',
              isChecked: true,
              num: 2,
              price: 6,
            },
            {
              id: 2,
              icon: baseUrl + '/img/荔枝.png',
              isChecked: false,
              num: 7,
              price: 20,
            },
            {
              id: 3,
              icon: baseUrl + '/img/榴莲.png',
              isChecked: false,
              num: 3,
              price: 40,
            },
            {
              id: 4,
              icon: baseUrl + '/img/鸭梨.png',
              isChecked: true,
              num: 10,
              price: 3,
            },
            {
              id: 5,
              icon: baseUrl + '/img/樱桃.png',
              isChecked: false,
              num: 20,
              price: 34,
            },
          ],
      },
      methods: {
        // 点击后对应水果数量++
        onClickAdd (i) {
          // 数量++
          this.fruitList[i].num++
          // 数量添加之后自动选中该水果
          this.fruitList[i].isChecked = true
        },
        // 点击后对应水果数量--
        onClickDel (i) {
          // 若水果数量大于零, 点击后对应水果数量--
          if (this.fruitList[i].num > 0) this.fruitList[i].num--
          // 若水果数量为零, 取消选中该水果
          if (!this.fruitList[i].num) this.fruitList[i].isChecked = false
        }
      },
      computed: {
        // 计算选中的水果的数量
        checkedCount () {
          return this.fruitList.filter(v => v.isChecked).length
        },
        // 计算选中水果的总价
        allPrice () {
          return this.fruitList.filter(v => v.isChecked).reduce((res, item) => res + item.num * item.price,0)
        },
        isAllChecked: {
          get() {
            return this.fruitList.length ? this.fruitList.every(v => v.isChecked) : false
          },
          set(newVal) {
            this.fruitList.forEach(v => v.isChecked = newVal)
          }
        }
      },
      watch: {

      }
    })
  </script>
</body>
</html>
